<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mobius RA Portal</title>
<link rel="icon" href="css/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="css/images/favicon.ico" type="image/x-icon" /> 
<link rel="stylesheet" href="js/resources/css/ext-all.css"
	type="text/css"></link>
<link rel="stylesheet" href="css/main.css"
	type="text/css"></link>
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
Ext.require([
             'Ext.grid.*',
             'Ext.data.*',
             'Ext.util.*',
             'Ext.Action',
             'Ext.tab.*',
             'Ext.button.*',
             'Ext.form.*',
             'Ext.layout.container.Card',
             'Ext.layout.container.Border'
             //'Ext.ux.ajax.SimManager',
             //'Ext.ux.PreviewPlugin'
         ]);
Ext.onReady(function() {
    Ext.QuickTips.init();
   
    // menu
	var menuStore = Ext.create('Ext.data.TreeStore', {
		
		proxy: {
		    type: 'ajax',
		    url: 'menuTestAction.action',
		   	//url: "treetest.json",
		    reader: {
		        type: 'json'
		        //totalProperty: 'total',
		        //root: 'root'
		    }
		},
       root: {
           text: 'Ext JS',
           //id: 'src',
           expanded: true
       },
	 	autoLoad: true
	});

    var tabClickInterval=1000;
    var isClickReady=true;
    var menuTree = Ext.create('Ext.tree.Panel', {
   	 	id:"menuTree",
        store: menuStore,
        region : 'west',
        animCollapse: 10,
        title : "<div style='text-align:center'>Menu</div>",
        frame: true,
        //resizable: true,
        //renderTo: 'tree-div',
        //height: 500,
        width: 210,
        minWidth: 170,
        maxWidth: 250,
        useArrows: true,
        //hideHeaders: true,
        containerScroll : true,
        rootVisible : false, 
        split: true,
        collapsible: true,
        //collapseDirection: 'left'
        listeners: {
            "collapse": function(p, eOpts ) {
            	//alert('collapsed');
            	$("svg>text>tspan").text("Menu");
            },
            "itemclick": function(view,record,item,index,e,eOpts) {
            	if(record.get('leaf')) {
            		if(isClickReady) {
            			isClickReady=false;
	            		var url=record.get('hrefTarget');
	            		var title=record.get('text');
	            		addTab(url,title);
	            		setTimeout(function() {isClickReady=true;}, tabClickInterval);
            		}
            	} else {
            		$(item).find('img.x-tree-expander').click();
            	}
            }
            
        }
    });
   
    
    
	
    var btn = Ext.create('Ext.button.Button', {
        //iconCls: 'new-tab',
        //renderTo: document.body,
        text: 'Add Closable Tab',
        handler: function () {
            addTab(true);
        }
    });
    
    function addTab (url,title) {
        var newTab = tabs2.add({
            closable: true,
            html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + url + '"> </iframe>',
            iconCls: 'tab_icon',
            title: title
        });
        newTab.show();
        //newTab.getEl().mask("aaa");
        //newTab.getEl().unmask();
    }
    
    
    // second tabs built from JS
    var tabs2 = Ext.create('Ext.tab.Panel', {
        //renderTo: document.body,
        id: 'tabPanel',
        region: 'center',
        activeTab: 0,
        frame: true,
        //collapsible: true,
        //split: true,
        //width: 800,
        //height: 600,
        plain: true,
        defaults :{
            autoScroll: true,
            bodyPadding: 2
        },
        items: [{
                title: 'Dashboard',
                closable: false,
                html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + 'chartdemo.jsp' + '"> </iframe>'
            }
        ]
    });
    
    var header = Ext.create('Ext.container.Container', {
    	region: 'north',
    	html: "<table style='margin: 5px 0 5px 0;' border=0 cellpadding=0 cellmargin=0 width='100%'><tr><td width=30></td><td><img src='css/images/logo.gif'></img></td><td align='right'><span style='margin-right:30px'>Welcome! ${username}</span><a style='margin-right:20px' href='logOut.action'>Logout</a></td></tr></table>",
    	style: "background-color: white"
    });
    
    var footer = Ext.create('Ext.panel.Panel', {
    	region: 'south',
    	items: [{
    		xtype: 'label',
    		text: '© Mobius Wireless Solutions Ltd.'
    	}]
    });
    
    Ext.create('Ext.container.Viewport', {
    	layout: 'border',
    	items: [menuTree,tabs2,header,footer]
    });
    
});

function addTab (url,title) {
	var tabs2 =Ext.getCmp("tabPanel");
    var newTab = tabs2.add({
        closable: true,
        html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + url + '"> </iframe>',
        iconCls: 'tab_icon',
        title: title
    });
    newTab.show();
}
</script>
</head>
<body>
</body>
</html>